<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<script src="../layui/layui.js"></script>
	</head>
	<body>
		<form class="layui-form">
			<div class="layui-inline">
				<label class="layui-form-label">城市</label>
				<div class="layui-input-inline">
					<select id="cityList" name="" lay-filter="form">
						<option value="">全部</option>
					</select>
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">区县</label>
				<div class="layui-input-inline">
					<select id="proList" name="">
						<option value="">全部</option>
					</select>
				</div>
			</div>
		</form>
		
		<script>
			layui.use(["element",'form','jquery',"layer",'table'],function(){
				var myelement = layui.element;
				var form1 = layui.form;
				var $ = layui.$;
				var layer = layui.layer;
				var table = layui.table;
				loadCity($,form1);
				form1.on('select(form)',function(object){
					loadProList($,object.value);
				});
			});
			
			function loadCity($){
				$.ajax({
					type:"get",
					url:"LianJiJSON/cityData.json",
					async:true,
					success:function(result){
						var arr = result.city;
						var str = "<option value='all'>全部</option>";
						$.each(arr,function(index,value){
							str += "<option value='" + arr[index].cityName + "'>" + arr[index].cityName + "</option>"
						});
						//alert(str);
							$("#cityList").html(str);
							layui.form.render();
					}
				});
			}
			
			function loadProList($,data){
				$.ajax({
					type:"get",
					url:"cityData.json",
					async:true,
					success:function(result){
						var arr = result.city;
						$.each(arr,function(index,v){
							if(data == arr[index].cityName){
								var list = arr[index].cityList;
								var str = "<option value='all'>全部</option>";
								$.each(list,function(index,value){
									str += "<option value='" + list[index] + "'>" + list[index] +"</option>";
								});
								$("#proList").html(str);
								layui.form.render();
							}
						});
					}
				});
			}
		</script>
	</body>
</html>
